<template>
  <div class="main-layout">
    <!-- 头部 -->
    <div class="main-header">
      <div style="width: 70px; text-align: center">
        <el-button type="primary" circle size="large">
          <el-icon size="30px"><i-ep-HomeFilled /></el-icon>
        </el-button>
      </div>
      <div style="flex: 1; text-align: center">
        <el-button type="primary" plain>导入JAVA类</el-button>
        <el-button type="primary" plain @click="showYApiModal">导入YApi示例</el-button>
        <el-button type="warning" plain @click="showJsonModal">查看JSON</el-button>
        <el-button type="success" plain>获取Vu3+Ts代码</el-button>
        <el-button type="success" plain>获取Vu3+js代码</el-button>
        <el-button type="success" plain :loading="vue3Loading" @click="getOproVue3">
          获取OPRO版Vue3代码
        </el-button>
        <el-button type="primary">预览</el-button>
        <el-button type="primary">保存到记录</el-button>
      </div>
      <div style="width: 100px">
        <el-button type="primary" link>
          <el-icon><i-ep-HelpFilled /></el-icon>帮助文档
        </el-button>
      </div>
    </div>

    <div class="main-body">
      <!-- 左边栏 资源栏-->
      <div class="main-left">
        <source-panel @jsonLoad="loadJsonCmp"></source-panel>
      </div>

      <!-- 中间栏 操作栏-->
      <div class="main-center">
        <core-panel
          ref="corePanelRef"
          @active="handleCptActive"
          @update="handleWidgetChange"
          @json="handleJsonUpdate"
          @select="handleSelect"
        ></core-panel>
      </div>

      <!-- 右边栏 设置栏-->
      <div class="main-right">
        <template v-if="activeCpt">
          <set-panel :widget="activeCpt" @change="handleFormChange"></set-panel>
        </template>
      </div>
    </div>

    <!-- 查看、导入JSON -->
    <json-modal
      v-model.visible="jsonModalVisible"
      :value="jsonContent"
      @save="JsonSave"
    ></json-modal>

    <!-- 导入YApi示例 -->
    <YApiModal
      v-model.visible="yaModalVisible"
      :value="yaJsonContent"
      @save="YaJsonSave"
    ></YApiModal>
  </div>
</template>

<script lang="ts" setup>
import SourcePanel from '@/views/LowDesigner/SourcePanel/index.vue'
import SetPanel from '@/views/LowDesigner/SetPanel/index.vue'
import CorePanel from '@/views/LowDesigner/CorePanel/index.vue'
import JsonModal from '@/components/JsonModal/index.vue'
import YApiModal from '@/components/YApiModal/index.vue'
import { ref, provide } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
import { jsonToVue3Code } from '@/service/low-code'
import { ElMessage, ElMessageBox } from 'element-plus'
import { transformSchemaToConfig } from '@/util'

const jsonModalVisible = ref(false)
const jsonContent = ref()
const yaModalVisible = ref(false)
const yaJsonContent = ref()

const myDesigner = ref<DesignerConfig>({
  widgetJson: [],
  widgetData: [],
})

const configJson = ref()

// do not use same name with ref

const activeCpt = ref<WidgetConfig>()
const activeType = ref<string>()
const activeIndex = ref<string>()
const activeCmpId = ref<string>()

provide('activeWidgetId', activeCmpId)

const corePanelRef = ref()
const onSubmit = () => {
  console.log('submit!')
}

function showJsonModal() {
  jsonContent.value = cloneDeep(configJson.value)
  jsonModalVisible.value = true
}

function showYApiModal() {
  yaModalVisible.value = true
}

function handleWidgetChange(params: any) {
  myDesigner.value.widgetJson = params
}

function handleFormChange(params: any) {
  corePanelRef.value?.updateWidget(params, activeCmpId.value)
}

function loadJsonCmp(jsonData: any) {
  corePanelRef.value?.loadComponentByJson(jsonData)
}

function handleCptActive(params: ActiveType, instance: any) {
  const { sourceType, oldIndex, cmpId } = params
  activeCpt.value = instance
  activeType.value = sourceType
  activeIndex.value = oldIndex
  activeCmpId.value = cmpId
}

function handleSelect(widget: WidgetConfig) {
  activeCpt.value = widget
  activeCmpId.value = widget.id
}

function handleJsonUpdate(params: any) {
  configJson.value = params
}

function getJson() {
  return configJson.value
}

function JsonSave(jsonContent: string) {
  loadJsonCmp(jsonContent[0])
  jsonModalVisible.value = false
}

function YaJsonSave(jsonContent: string) {
  const content = transformSchemaToConfig(jsonContent)
  console.log('content', content)
  loadJsonCmp(content[0])
  yaModalVisible.value = false
}

const vue3Loading = ref(false)
async function getOproVue3() {
  // console.log('configJson.value', configJson.value)
  if (!configJson.value) {
    ElMessage.error('请添加组件信息')
    return
  }

  if (configJson.value.length < 0) {
    ElMessage.error('请添加组件信息')
    return
  }

  if (!configJson.value[0].props.modelLabel) {
    ElMessage.error('请添加模块名')
    return
  }

  if (!configJson.value[0].props.modelName) {
    ElMessage.error('请添加模块值')
    return
  }
  vue3Loading.value = true
  const configStr = JSON.stringify(configJson.value)
  const result = await jsonToVue3Code(configStr).finally(() => {
    vue3Loading.value = false
  })
  if (result.code == 200) {
    ElMessageBox.alert(`操作成功！代码已生成，访问以下地址可预览： ${result.data}`, 'Title', {
      confirmButtonText: '确定',
    })
  } else {
    ElMessage.error(result.message)
  }
}

defineExpose({
  getJson,
})
</script>

<style scoped>
.main-layout {
  height: 100vh;
  box-sizing: border-box;
}
.main-header {
  height: 60px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-body {
  height: calc(100% - 100px);
  display: flex;
}
.main-left {
  width: 360px;
  height: 100%;
  border: 1px solid #dcdfe6;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 14px 20px;
}
.main-center {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid #dcdfe6;
}
.component-display {
  height: 44px;
  border: 1px solid red;
  padding: 6px;
}
.main-right {
  width: 320px;
  height: 100%;
  border: 1px solid #dcdfe6;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 20px;
}
</style>
